<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        offset="50"
        @load="onLoad"
      >
        <ArticleItem
          v-for="item in articleList"
          :key="item.art_id"
          :articleItem="item"
          @disLikeEv="disLikeEv"
          @reportEv="reportEv"
          @click.native="itemClickFn(item.art_id)"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from "@/components/ArticleItem";
import { getAllArticleListAPI, dislikeArticleAPI, reportArticleAPI } from "@/utils/api";
import { Notify } from 'vant'
export default {
  props: ["channelId"],
  data() {
    return {
      articleList: [],
      loading: false,
      finished: false,
      timestamp: new Date().getTime(),
      isLoading: false,
    };
  },
  components: {
    ArticleItem,
  },
  created() {
    this.getAllArticleList();
  },
  methods: {
    // /获取文章列表
    async getAllArticleList() {
      const res = await getAllArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.timestamp,
      });
      // console.log(res);
      this.articleList = [...this.articleList, ...res.data.data.results];
      this.timestamp = res.data.data.pre_timestamp;
      this.loading = false;

      if (res.data.data.pre_timestamp === null) {
        this.finished = true
      }

      // 顶部加载状态改为false
      this.isLoading = false
    },
    //底部加载事件方法
    onLoad() {
      if (this.articleList.length === 0) {
        // 第一次上面还是判定触底(触发onLoad方法时loading自动改true)
        this.loading = false;
        // 如果不改回来, 下次触底就不在执行onLoad方法
        return; // 如果页面没有数据, 没有高度, 让本次onLoad逻辑代码不往下执行
      }
      this.getAllArticleList();
    },
    //下拉刷新
    onRefresh() {
      this.articleList = []
      this.timestamp = new Date().getTime()
      this.getAllArticleList();
    },
    //反馈不感兴趣
    async disLikeEv(id) {
      await dislikeArticleAPI({
        artId: id
      })
      // console.log(res);
      Notify({ type: 'success', message: '反馈成功'})
    },
    //反馈垃圾内容
    async reportEv(id, value) {
      await reportArticleAPI({
        artId: id,
        type: value
      })
      Notify({ type: 'success', message: '举报成功'})
    },
    // 跳转到详情
    itemClickFn (id) {
      this.$router.push({
        path: `/detail?art_id=${id}`
      })
    }
  },
};
</script>

<style>
</style>